<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 :first-child {
        background-color: red;
    }

    .box1 :last-child {
        background-color: gold;
    }

    /* 需要空格 */
    .box1 :nth-child(3) {
        background-color: blue;
    }

    .box1 p:first-of-type {
        color: palegreen;
    }
</style>

<body>



    <!--结构伪类选择器
    1.E:first-child 匹配父元素中的第一个子元素E
    2.E:last-child  匹配父元素中最后一个E元素
    3.E:nth-child(n)   匹配父元素中第n个子元素E
        a.n可以是数字,关键字和公式
        b.n如果是数字,就是选择第n个
        c.常见的关键字 even偶数 odd奇数
        d.常见的公式（如果n是公式 那么n从0开始计算并且一直递增）
            公式：2n 2n+1 5n n+5 -n+5
    4.E:first-of-type 指定类型E的第一个
    5.E:first-of-type 指定类型E的最后一个
    6.E:first-of-type 指定类型E的第n个-->

    <div class="box1">
        <h2>二级标题</h2>
        <p>段落1</p>
        <h2>二级标题</h2>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <p>段落4</p>
        <p>段落5</p>

    </div>
</body>

</html>